<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>

  <div id="app">
    <fieldset>
      <legend>生命周期钩子</legend>
      <child v-show="isShow"></child>
      <button @click="isShow = !isShow">Click</button>
    </fieldset>
  </div>

  <script>
        const App = {
      data() {
        return { isShow: true }
      },
      beforeCreate() {
        console.log('root beforeCreate', this.message, this.$el)
      },
      created() {
        console.log('root created', this.message, this.$el)
      },
      beforeMount() {
        console.log('root beforeMount', this.message, this.$el)
      },
      mounted() {
        console.log('root mounted', this.message, this.$el) 
      }
    }
    const app = Vue.createApp(App)
    app.component('child', {
      template: '<div>{{text}}</div>',
      data() { 
        return {text: 'I am child'}
      }, 
      created() {
        console.log('child  created')
      },
      mounted() {
        console.log('child mounted')
      },
      beforeUnmount() {
        console.log('child  beforeUnmount')
      },
      unmounted() {
        console.log('child  unmounted')
      },
    })

    app.mount('#app')

  </script>


</body>
</html>